import React, { useState, memo, useMemo, useCallback, useEffect } from "react";

const Component1 = () => {

  const [num, setNum] = useState(1)

  const [count, setCount] = useState(1);

  const [name, setName] = useState('rose')

  const [obj, setObj] = useState({name: 'sss'})

  useEffect(() => {
    alert('触发啦')
  }, [obj])

  const handleClickBtn = () => {
    console.log('xsxs')
    setObj({name: 'sss'})
  }

  const alertNumber = () => {
    console.log('点击了')
    setTimeout(() => {
      console.log(num)
    }, 3000);
  }

  const data = useMemo(()=>{
    return {
      name
    }
  },[name, num])

  const callback = useCallback(() => {
    return count;
  }, [count]);

  return (
    <div>
      <div>num的值：{num}</div>
      <button onClick={() => {setNum(num + 1)}}>点击</button>
      <button onClick={alertNumber}>alertNumber</button>
      <button onClick={() => setName('xxx')}>setName</button>
      <button onClick={handleClickBtn}>handleClickBtn</button>
      <Child data={data} callback={callback}/>
    </div>
  )
}

const Child = memo(({data, callback}) =>{
  console.log('child render...', data.name)
  const [count, setCount] = useState(() => callback());
  useEffect(() => {
      setCount(callback());
  }, [callback]);
  return (
      <div>
          <div>child</div>
          <div>{data.name}</div>
      </div>
  );
})

export default Component1